<?php
// 配置键定义
$configKey = isset($configKey) ? $configKey : 'dev-tech';

// 移动应用开发技术栈默认配置
$mobileConfig = [
    'section_id' => $configKey,

    'section_pretitle' => '移动技术',
    'section_title' => '我们的技术栈',
    'section_subtitle' => '采用前沿技术与最佳实践，确保移动应用性能卓越、安全可靠',
    'bg_color' => 'gray-50',
    'card_style' => 'modern',
    'texts' => [
        'tech_item_bullet' => '•'
    ],
    'tech_stacks' => [
        [
            'title' => 'iOS技术栈',
            'technologies' => [
                'Swift 5',
                'Objective-C',
                'SwiftUI',
                'UIKit',
                'Core Data',
                'ARKit',
                'Core ML'
            ],
            'icon' => 'fa-apple',
            'accent_color' => 'gray-800'
        ],
        [
            'title' => 'Android技术栈',
            'technologies' => [
                'Kotlin',
                'Java',
                'Jetpack Compose',
                'Android SDK',
                'Room Database',
                'Jetpack',
                'Firebase'
            ],
            'icon' => 'fa-android',
            'accent_color' => 'green-600'
        ],
        [
            'title' => '跨平台技术',
            'technologies' => [
                'React Native',
                'Flutter',
                'Dart',
                'Redux',
                'GraphQL',
                'Fastlane',
                'CodePush'
            ],
            'icon' => 'fa-code',
            'accent_color' => 'blue-600'
        ],
        [
            'title' => '后端与API',
            'technologies' => [
                'Node.js',
                'Firebase',
                'AWS Mobile',
                'RESTful API',
                'GraphQL',
                'WebSocket',
                'MongoDB'
            ],
            'icon' => 'fa-server',
            'accent_color' => 'purple-600'
        ]
    ],
    // 样式类配置字段
    'classes' => [
        // 区块相关样式
        'section_container' => 'w-full mx-auto mb-20',
        'section_text_center' => 'text-center mb-16',
        'section_pretitle' => 'inline-block text-sm font-semibold uppercase tracking-wider mb-2',
        'section_title' => 'text-3xl md:text-4xl font-bold text-gray-900 mb-4',
        'section_subtitle' => 'text-lg text-gray-600 max-w-3xl mx-auto',
        'section_grid' => 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8',

        // 卡片相关样式
        'card_base' => 'p-8 rounded-xl transition-all duration-300 h-full',
        'card_modern' => 'bg-white shadow-md hover:shadow-xl hover:-translate-y-1',
        'card_classic' => 'bg-white border border-gray-200 hover:border-primary',
        'card_minimal' => 'bg-transparent hover:bg-gray-50',

        // 卡片内容样式
        'card_icon_container' => 'w-14 h-14 rounded-lg flex items-center justify-center mb-6 text-2xl transition-transform duration-500',
        'card_title' => 'text-xl font-semibold mb-4 text-gray-900',
        'tech_list' => 'space-y-2',
        'tech_item' => 'flex items-center text-gray-700',
        'tech_bullet' => 'text-xs mr-2',

        // 动画相关样式
        'animation_tech_card' => 'tech-card'
    ]
];

// 合并配置（优先级：页面配置 > 默认配置）
$data = array_merge($mobileConfig, $pageConfig['components'][$configKey] ?? []);

// 处理背景样式
$bgClass = "bg-{$data['bg_color']}";

// 卡片样式映射
$cardStyleMap = [
    'modern' => $data['classes']['card_modern'],
    'classic' => $data['classes']['card_classic'],
    'minimal' => $data['classes']['card_minimal']
];

// 组合基础卡片样式和选中的卡片样式
$cardClass = $data['classes']['card_base'] . ' ' . ($cardStyleMap[$data['card_style']] ?? $cardStyleMap['modern']);
?>

<!-- 技术栈展示 -->
<div class="<?php echo $data['classes']['section_container']; ?>">
    <div class="<?php echo $data['classes']['section_text_center']; ?>">
        <span class="<?php echo $data['classes']['section_pretitle']; ?>">
            <?php echo htmlspecialchars($data['section_pretitle']); ?>
        </span>

        <h2 class="<?php echo $data['classes']['section_title']; ?>">
            <?php echo htmlspecialchars($data['section_title']); ?>
        </h2>

        <p class="<?php echo $data['classes']['section_subtitle']; ?>">
            <?php echo htmlspecialchars($data['section_subtitle']); ?>
        </p>
    </div>

    <div class="<?php echo $data['classes']['section_grid']; ?>">
        <?php foreach ($data['tech_stacks'] as $index => $stack): ?>
            <div class="<?php echo $cardClass; ?> group <?php echo $data['classes']['animation_tech_card']; ?>">
                <div class="<?php echo $data['classes']['card_icon_container']; ?> bg-<?php echo $stack['accent_color']; ?>/10 text-<?php echo $stack['accent_color']; ?> group-hover:scale-110">
                    <i class="fa <?php echo htmlspecialchars($stack['icon']); ?>"></i>
                </div>

                <h3 class="<?php echo $data['classes']['card_title']; ?> group-hover:text-<?php echo $stack['accent_color']; ?> transition-colors duration-300">
                    <?php echo htmlspecialchars($stack['title']); ?>
                </h3>

                <ul class="<?php echo $data['classes']['tech_list']; ?>">
                    <?php foreach ($stack['technologies'] as $tech): ?>
                        <li class="<?php echo $data['classes']['tech_item']; ?>">
                            <span class="<?php echo $data['classes']['tech_bullet']; ?> text-<?php echo $stack['accent_color']; ?>">
                                <?php echo htmlspecialchars($data['texts']['tech_item_bullet']); ?>
                            </span>
                            <?php echo htmlspecialchars($tech); ?>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 技术卡片动画
        const techCards = document.querySelectorAll('.<?php echo $data['classes']['animation_tech_card']; ?>');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry, index) => {
                if (entry.isIntersecting) {
                    // 级联动画效果
                    setTimeout(() => {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }, index * 0.15 * 1000);
                    observer.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.1
        });

        techCards.forEach(card => {
            // 初始化卡片样式（不可见状态）
            card.style.opacity = '0';
            card.style.transform = 'translateY(30px)';
            card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            observer.observe(card);
        });
    });
</script>